<template>
    <div style="width: 300px">
        <MgsTree
            show-checkbox
            highlight-current
            :data="data"
            node-key="id"
            :default-checked-keys="dck"
        ></MgsTree>
        <hr />
        <MgsTree
            show-checkbox
            :data="data"
            node-key="id"
            :default-checked-keys="dck"
        >
            <div slot="append">sss</div>
        </MgsTree>
    </div>
</template>

<script>
import MgsTree from '@mgs/components-basic/mgs-tree';

export default {
    components: { MgsTree },
    data() {
        return {
            dck: [5],
            data: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    label: '三级 1-1-2',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1',
                        },
                        {
                            id: 6,
                            label: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    label: '一级 3 -- 长节点测试，这个节点很长长长长长长长长长长长长长长',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1 -- 长节点测试，这个节点很长长长长长长长长长长长长长长',
                        },
                        {
                            id: 8,
                            label: '二级 3-2 -- 长节点测试，这个节点很长长长长长长长长长长长长长长',
                            children: [
                                {
                                    id: 11,
                                    label: '二级 3-2-1 -- 长节点测试，这个节点很长长长长长长长长长长长长长长',
                                },
                                {
                                    id: 12,
                                    label: '二级 3-2-2 -- 长节点测试，这个节点很长长长长长长长长长长长长长长',
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    mounted() {
        setTimeout(() => (this.dck = [5, 11]), 1000);
    },
};
</script>
